<html>
<head>
	<title>test</title>
	<style type="text/css">
	[draggable] {
	  -moz-user-select: none;
	  -khtml-user-select: none;
	  -webkit-user-select: none;
	  user-select: none;
	}
	.container {
		padding: 5 5 5 5; 
		border-radius: 5 5 5 5;
		background-color: lightgray;
		border-color: gray;
		border-width: 1;
		border-style: solid;
		position: fixed;
		box-shadow: 5px 5px 5px #888888;
		overflow: auto;
		display: none;

		width: 300;
		height: 310;
		//margin: 30 10 10 80;
		float: left;
	}
	.topC {
		padding: 2 4 6 4;
		word-wrap: break-word;
		cursor: pointer;
	}
	.cursorMove {
		cursor: move;
	}
	.cursorPointer {
		cursor: pointer;
	}
	.canvas {
		padding: 2 4 2 4;
		border-radius: 3 3 3 3;
		background-color: white;
		display: block;
		height: auto;

		height: 89%;
		border-color: gray;
		border-width: 1;
		border-style: solid;
	}
	</style>
</head>
<body>
	<!-- <h3>Please enable your Javascript.</h3> -->
	<h1>
	<input type='button' value='Window'></input>
	</h1>
</body>
<script type="text/javascript">
	var btn = document.getElementsByTagName('input')[0];
	var container = document.createElement('div');
	var topC = document.createElement('div');
	var canvas = document.createElement('div');
	var bottomC = document.createElement('div');

	container.className = 'container';
	topC.className = 'topC';
	canvas.className = 'canvas';
	canvas.innerHTML = 'CANVAS';
	topC.innerHTML = 'AAAAAAAAAAAAAAAAAAAAAA';

	container.appendChild(topC);
	container.appendChild(canvas);

	var moveFn = function(e) {
		var evt = e || window.event;
		var dX = evt.clientX - container.initX;
		var dY = evt.clientY - container.initY;

		container.style.left = container.startX + dX;
		container.style.top = container.startY + dY;
		topC.removeAttribute('draggable');
		//container.startX = container.startY = 0;
	};
	topC.addEventListener('mousedown', function(e) {
		var evt = e || window.event;

		container.startX = container.offsetLeft;//parseInt(container.style.left.replace('px', '')) || 0;
		container.startY = container.offsetTop; //parseInt(container.style.top.replace('px', '')) || 0;
		container.initX = evt.clientX;
		container.initY = evt.clientY;
		topC.draggable = true;
		topC.classList.add('cursorMove');
		document.addEventListener('mousemove', moveFn);
	});
	document.addEventListener('mouseup', function(e) {
		topC.classList.remove('cursorMove');
		topC.draggable = false;
		document.removeEventListener('mousemove', moveFn);
	});
	
	btn.onclick = function() {
		if(!container.style.display) {
			container.style.display = 'block';	
		} else {
			container.style.display = '';
		}
		
	};

	document.body.appendChild(container);


</script>
</html>